<template>
  <base-modal
    :show.sync="show"
    :title="$t('event.setting.serviceEventTypeSetting.flow.component.title1')"
    width="990px"
    class="creat-card-dialog"
    @closed="onClose"
  >
    <div class="base-modal-content">
      <div class="base-card-heard">
        <div class="base-card-msg">
          <i class="el-icon-warning"></i>
          <span>{{$t('event.setting.serviceEventTypeSetting.flow.component.des1')}}</span>
        </div>
        <div class="radio-type">
          <el-radio v-model="selectRadio" label="exist">{{$t('event.setting.serviceEventTypeSetting.flow.component.label1')}}</el-radio>
          <el-radio v-model="selectRadio" label="stock">{{$t('event.setting.serviceEventTypeSetting.flow.component.label2')}}</el-radio>
        </div>
      </div>

      <!-- start 从已添加的组件库选择 -->
      <el-table
        v-if="selectRadio == 'exist'"
        ref="multipleTable"
        :data="tableCardData"
        class="page-table"
        :highlight-current-row="false"
        header-row-class-name="page-table-header"
        stripe
        tooltip-effect="dark"
      >
        <el-table-column type="index" :label="$t('common.base.SN')" width="60px"></el-table-column>
        <el-table-column prop="name" :label="$t('common.base.name')" show-overflow-tooltip>
          <template slot-scope="scope">
            <pre class="pre-text">{{ getCardNameLabel(scope.row) }}</pre>
          </template>
        </el-table-column>
        <el-table-column prop="description" :label="$t('common.base.explain')" show-overflow-tooltip>
          <template slot-scope="scope">
            <pre class="pre-text">{{ htmlUnEscape(scope.row.description) }}</pre>
          </template>
        </el-table-column>
        <el-table-column prop="inputType" :label="$t('event.setting.serviceEventTypeSetting.flow.component.label3')" width="160px">
          <template slot-scope="scope">{{ scope.row.inputType == 'single' ? $t('common.base.onceTime') : $t('common.base.moreTime') }}</template>
        </el-table-column>
        <el-table-column prop="enabled" :label="$t('common.base.status')" width="100px">
          <template slot-scope="scope">{{ scope.row.enabled == 1 ? $t('common.base.enable') : $t('common.base.disable') }}</template>
        </el-table-column>
        <el-table-column prop="checked" :label="$t('common.base.enable')" width="100px">
          <template slot-scope="scope">
            <el-checkbox :disabled="!scope.row.enabled" v-model="scope.row.checked"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
      <!-- end 从已添加的组件库选择 -->

      <!-- start 从模版库中选择-->
      <div v-if="selectRadio == 'stock'">
        <template-library :card-sys-list="cardSysList" card-type="importCard" @update="updateTemplateLibrary" />
      </div>
      <!-- end 从模版库中选择-->
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="onSubmit">{{$t('common.base.confirm')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
/* api */
import * as SettingServiceEventApi from '@src/api/SettingServiceEventApi';
/* component */
import TemplateLibrary from '../../../additional/components/TemplateLibrary.vue';
import { CardNameLabelEnum } from '@model/enum/LabelEnum'

export default {
  name: 'creat-card-dialog',
  props: {
    eventCardList: {
      type: Array,
      default: () => [],
    },
    cardSysList: {
      type: Array,
      default: () => [],
    },
    visiable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selectRadio: 'exist', //  选择从已存在的附加组件中添加
      tableCardData: [], //  表格 - 已添加的组件库
      show: false, //  模态框显示(隐藏)
    };
  },
  watch: {
    visiable(newValue) {
      this.show = newValue;

      if (newValue) {
        this.selectRadio = 'exist';
        this.fetchCardList();
      }
    },
  },
  methods: {
    // 获取附加组件标题的多语言label
    getCardNameLabel(item) {
      const { name, cardNameLanguage } = item
      const locale = this.$i18n.locale
      return cardNameLanguage?.locale || CardNameLabelEnum[name] || name
    },
    /* 查询已添加的组件列表 */
    fetchCardList() {
      SettingServiceEventApi.getAllCardList()
        .then(res => {
          const { status, message, data = [] } = res;

          if (status == 0) {
            let cardList = data.slice();

            this.tableCardData = cardList.map(card => {
              // 判断是否已启用
              let index = this.eventCardList.findIndex(item => item.id == card.id);
              card.checked = index > -1;

              return card;
            })
          } else {
            this.$message.error(message);
          }
        })
        .catch(err => console.error(err))
    },
    /* 监听模板库组件更新 */
    updateTemplateLibrary(cardItem, inputType, id) {
      this.$message.success(this.$t('common.base.tip.addSuccess'));
      let card = { id, inputType, name: cardItem.cardName, specialfrom: '' };
      this.$emit('updateImport', card);
      this.onClose();
    },
    onClose() {
      this.$emit('update:visiable', false);
    },
    onSubmit() {
      // 从模板库添加直接关闭
      if (this.selectRadio == 'stock') return this.onClose();

      let checked = this.tableCardData.filter(card => card.checked)
        .map(card => {
          let { id, inputType, name, enabled, specialfrom } = card;
          return { id, inputType, name, enabled, specialfrom };
        })

      this.$emit('update', checked);
      this.onClose();
    },
    htmlUnEscape(value) {
      if (!value) return '';
      return value.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
    },
  },
  components: {
    TemplateLibrary,
  },
};
</script>

<style lang="scss" scoped>
.creat-card-dialog {
  .base-modal-content {
    padding: 20px;

    .base-card-heard {
      width: 900px;
      .base-card-msg {
        height: 40px;
        line-height: 40px;
        color: rgba(0, 0, 0, 0.65);
        background: #e6f7ff;
        border-radius: 2px;
        border: 1px solid #91d5ff;
        margin-bottom: 21px;

        .el-icon-warning {
          color: $color-primary;
          margin-left: 17px;
        }
      }

      .radio-type {
        margin-bottom: 8px;
      }
    }

    .page-table {
      width: 100%;
      padding: 0;
    }
  }

  // 修改 TemplateLibrary 样式
  ::v-deep .template-card-item {
    width: 440px !important;
  }
}
</style>
